<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类的操作</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

    </style>
    <script>
        window.onload=function () {
            var box=document.getElementById("box");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function () {
                // box.className+=" c2";//用class属性间接的修改多个样式 第一种方式
                // addClass(box,"c2");
                removeClass(box,"b02");//console看出b02 已删除

            }
        };
        //定义一个函数 用来向一个元素中添加指定的class属性值
        //参数
        //      obj 要添加class属性
        //      cn  要添加的class值
        function addClass(obj,cn) {
            if (!hasClass(box,cn)){
                obj.className+=" "+cn;
            }

        }
        //定义一个函数 判断一个元素中是否含有指定的class属性值 如果有该class则返回true 如果没有 则返回false
        function hasClass(obj,cn) {
                //判断obj中有没有cn class  创建一个正则表达式
                // var reg=/\bc2\b/;//有c2且是独立的
            var reg=new RegExp("\\b"+cn+"\\b");
                // alert(reg);
                return reg.test(obj.className);
        }
        //删除元素的class属性
        function removeClass(obj,cn) {
            //创建一个正则表达式
            var reg=new RegExp("\\b"+cn+"\\b");
            obj.className=obj.className.replace(reg,"");
        }
        function toggleClass(obj,cn) {//toggleClass用来切换一个类，如果元素中具有该类，则删除 如果没有 则添加
            if (hasClass(obj, cn)) {
                removeClass(obj, cn);
            } else {
                addClass(obj, cn);
            }
        }
    </script>
</head>
<body>
<script>
    /* 我们希望写一行代码 可以同时写多个样式 我们可以通过修改元素的class属性来间接的修改样式，
    *这样一来 我们只修改一次，即可同时修改多个样式 浏览器只需要渲染（重新加载）页面一次，性能比较高
    *   1.addClass 添加class属性
    *     function addClass(obj,cn){}
    *       定义一个函数 用来向一个元素中添加指定的class属性值
    *        参数
    *           obj 要添加class属性
    *           cn  要添加的class值
    *
    *   2.hasClass 元素中是否含有某个属性
    *     function hasClass(obj,cn){}
    *       定义一个函数 判断一个元素中是否含有指定的class属性值 如果有该class则返回true 如果没有 则返回false
    *       参数
    *           obj 要添加class属性
    *           cn  要添加的class值
    *
    *   3.removeClass 删除class属性
    *       function removeClass(obj,cn){}
    *         参数
    *           obj 要删除class属性
    *           cn  要删除的class值
    *   4.toggleClass   切换class属性 如果有该class的属性 则删除，如果没有 则添加
    *       function toggleClass(obj,cn){
    *           if(hasClass(obj,cn)){
    *               remove(obj,cn);
    *             }else{
    *               addmove(obj,cn)
    *           }
    *        }
    *      参数
    *           obj 要删除class属性
    *           cn  要删除的class值
    *
    * */
</script>
<button id="btn01">点击按钮</button>
<br />
<br />
<div id="box" class="c1 b02"></div>
</body>
</html>